<template>
    <blogHeader></blogHeader>
    

    <!-- 主内容区域 -->
    <main class="container min-h-[80vh] max-w-[1200px] mt-6 mx-auto p-4">
        <div class="grid grid-cols-10 gap-8">
            <!-- 左栏 -->
            <div class=" sm:col-span-7 col-span-10 rounded-2xl ">
                <!-- card -->
                <a @click="goArticleDetail(item.id)" v-for="(item, index) in articles" :key="item.id"
                    class="article-card opacity-95  block mx-6 mb-6 bg-white border border-gray-200 rounded-2xl overflow-hidden relative">
                    <!-- 是否置顶 -->
                    <div v-if="item.isTop" class="blog-font-cute cursor-default z-10 transition-all duration-300 article-isTop text-white text-center absolute text-2xl bg-[#7599b6b9] w-28 h-8 top-2 translate-x-[-33px] rotate-[-45deg]">置顶</div>
                    <div :style="{ backgroundImage: `url(${item.cover})` }" v-loading="item.cover === ''"
                        class="w-full h-[350px] pl-4 bg-cover bg-center  rounded-2xl transition-all duration-300 filter-grayscale">
                    </div>

                    <!-- 标题+标签 -->
                    <div
                        class="article-title w-full h-[95px] pl-4 absolute bottom-[-35px] bg-gray-400 bg-opacity-50 transition duration-300">
                        <div class="blog-font-cute">
                            <span v-for="(tag, index) in item.tags" :key="tag.id"
                                class="cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 pt-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
                                {{ tag.name }}
                            </span>

                        </div>
                        <span class="blog-font-cute text-2xl text-white">{{ item.title }}</span>
                    </div>
                    <p
                        class="article-time blog-font-en h-[25px] flex items-center font-normal leading-6 pl-4 text-gray-400  text-sm dark:text-gray-400 absolute right-4 bottom-[35px] transition duration-300">
                        <!-- 发布时间 -->
                        <svg class="inline w-3 h-3 mr-2 text-[#ffffffa8] dark:text-white" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                        </svg>
                        <span class="text-[#ffffffa8]">{{ item.createDate }}</span>
                        <!-- 所属分类 -->
                        <svg class="inline w-3 h-3 ml-5 mr-2 text-[#ffffffa8] dark:text-white" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
                        </svg>
                        <span class="blog-font-cute text-[#ffffffa8] hover:underline max-w-[60px] truncate">{{
                            item.category.name
                            }}</span>
                    </p>
                    <!-- 摘要 -->
                    <p
                        class="article-summary px-4 w-full max-h-[20px] leading-5 absolute bottom-[-35px] text-[#f0f5f5a4] dark:text-yellow-400 truncate transition duration-300">
                        {{ item.summary }}
                    </p>
                </a>
                <!-- 分页 -->
                <nav aria-label="Page navigation example" class="mt-10 flex justify-center">
                    <ul class="flex items-center -space-x-px h-10 text-base">
                        <!-- 上一页 -->
                        <li>
                            <a href="#" @click="getArticleCardData(current - 1)"
                                :class="[current > 1 ? '' : 'cursor-not-allowed']"
                                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                <span class="sr-only">Previous</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 1 1 5l4 4" />
                                </svg>
                            </a>
                        </li>
                        <!-- 页码 -->
                        <li v-for="(pageNo, index) in pages" :key="index">
                            <a @click="getArticleCardData(pageNo)"
                                class="flex items-center justify-center px-4 h-10 leading-tight border transition-colors duration-300  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[pageNo == current ? 'text-blue-600 bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700']">
                                {{ index + 1 }}
                            </a>
                        </li>
                        <li>
                            <a href="#" @click="getArticleCardData(current + 1)"
                                :class="[current < pages ? '' : 'cursor-not-allowed']"
                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                <span class="sr-only">Next</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 右栏 -->
            <aside class="col-span-3 hidden sm:block">
                <AuthorInfoCard></AuthorInfoCard>
                <TagCloudCard></TagCloudCard>
            </aside>
        </div>

    </main>
    <div class="hidden md:block sticky bottom-0 right-0 w-full">
        <div class="absolute right-0 bottom-0">
            <live2d></live2d>
        </div>
    </div>
    <!-- 底部 -->
    <indexFooter></indexFooter>


</template>


<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import indexFooter from '@/composition/frontend/component/indexFooter.vue';
import blogHeader from '@/composition/frontend/component/Header.vue'
import AuthorInfoCard from '@/composition/frontend/component/AuthorInfoCard.vue';
import TagCloudCard from '@/composition/frontend/component/TagCloudCard.vue';
import live2d from '@/components/live2d.vue';
import { getArticlePageList } from '@/api/frontend/article';
import { useBlogSettingsStore } from '@/stores/blogsettings';
import { showMessage } from '@/composables/utils';
import router from '@/router';
import { initModals, Modal } from 'flowbite'




//=====================跳转详情页=======================
const goArticleDetail = (id) => {
    router.push('/article/' + id)
}



onMounted(() => {
    //博客数据获取
    // initBlogSettings()
    //文章卡片数据获取
    getArticleCardData(current.value)
    
})
const cardLoading = ref(false)
////=====================初始化博客设置信息(作者简介+文章内容渲染)=======================
const blogSettingsStore = useBlogSettingsStore()
// const initBlogSettings = () => {     //这里我们不用再初始化blogSettings了,因为在请求拦截器中,我们进行判断:访问非admin开头的路径,就会获取blogSettings然后保存到全局状态中
//     blogSettingsStore.getBlogSettingsData().then(res => {   //使用store获取blogSettings并实现状态存储
//         blogSettings.value = res.value
//     })
// }
//文章集合
const articles = ref([])
const current = ref(1)  //当前页码
const size = ref(10)   //每页显示的文章数
const total = ref(0)    //文章总数
const pages = ref(1)  //总共多少页
const getArticleCardData = async (currentNo) => {
    //上下页是否能点击判断,上一页页码小于1或者下一页页码大于pages
    if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) {
        return
    }
    getArticlePageList({ current: currentNo, size: size.value }).then(res => {
        if (!res.success) {
            showMessage('获取文章失败', 'error')
            return
        }
        articles.value = res.data
        current.value = res.current
        size.value = res.size
        total.value = res.total
        pages.value = res.pages
    }).then(() => {
        for (let i = 0; i < articles.value.length; i++) {
            if (articles.value[i].cover !== '') { //如果文章封面为空,则请求随机图片
                continue
            }
            fetch("https://api.maho.cc/random-img/pc.php").then(res => {
                if (!res.ok) {
                    showMessage('获取随机图片失败', 'error')
                    return
                }
                articles.value[i].cover = res.url
            }).catch(() => {
                showMessage('获取随机图片失败', 'error')
            }).finally(() => {

            })
        }
    })
}











</script>



<style scoped>

.article-card:hover .filter-grayscale {
    filter: blur(7px);
    scale: 1.05;
}

.article-card:hover .article-title {
    transform: translateY(-30px);
}

.article-card:hover .article-time {
    transform: translateY(-30px);
}


.article-summary {
    font-family: 'cute_Cat';
}

.article-card:hover .article-summary {
    transform: translateY(-45px);
}


</style>